﻿<!DOCTYPE html>
<!--
//*****************************************************************************
//
//	Copyright 2015 Microsoft Corporation
//
//	Licensed under the Apache License, Version 2.0 (the "License");
//	you may not use this file except in compliance with the License.
//	You may obtain a copy of the License at
//
//	http ://www.apache.org/licenses/LICENSE-2.0
//
//	Unless required by applicable law or agreed to in writing, software
//	distributed under the License is distributed on an "AS IS" BASIS,
//	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//	See the License for the specific language governing permissions and
//	limitations under the License.
//
//*****************************************************************************
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>MediaPlayerJS</title>

    <!-- WinJS references -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- MediaPlayerJS references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="splitter" class="splitView"
        data-win-control="WinJS.UI.SplitView"
        data-win-options="{
            openedDisplayMode: 'overlay',
            closedDisplayMode: 'none',
            paneOpened: true
        }">

        <!-- Pane area -->
        <div>
            <div class="toggleButton">
                <button class="win-splitviewpanetoggle"
                    data-win-control="WinJS.UI.SplitViewPaneToggle"
                    data-win-options="{ splitView: select('.splitView') }"
                ></button>
            </div>

            <div class="commands">
                <p>Open Local File or URI</p>
                <div class="horizontalStackPanel">
                    <span>
                        <button data-win-control="WinJS.UI.AppBarCommand"
                                data-win-options="{
                                id:'openFileButton',
                                icon:'openfile',
                            }"></button>
                    </span>
                    <span>
                        <input id="uriBox" type="text">
                    </span>
                </div>
                <div id="toggleSwitchAudioDecode"
                     data-win-control="WinJS.UI.ToggleSwitch"
                     data-win-options="{
                        title: 'Force Decode Audio',
                        labelOff: 'OFF',
                        labelOn: 'ON'
                     }">
                </div>
                <div id="toggleSwitchVideoDecode"
                     data-win-control="WinJS.UI.ToggleSwitch"
                     data-win-options="{
                        title: 'Force Decode Video',
                        labelOff: 'OFF',
                        labelOn: 'ON'
                     }">
                </div>
            </div>

        </div>

        <!-- Content area -->
        <div data-win-control="MediaPlayer">
            <video id="mediaElement" controls="controls"></video>
        </div>

    </div>

    <!-- Control panel toggle button -->
    <div class="toggleButton">
        <button class="win-splitviewpanetoggle"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
    </div>

</body>
</html>
